<template>
    <div class="main">
        <div v-if="rightsButtons['add']" class="filter-container">
            <el-button type="success" icon="el-icon-plus" class="filter-item fr" @click="showAdd">新建</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="专题名称" prop="name"></el-table-column>
            <el-table-column align="center" label="专题Logo" width="160">
                <template slot-scope="scope">
                    <img :src="scope.row.image" alt="" width="60" height="60"/>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sort"></el-table-column>
            <el-table-column align="center" label="是否启用" width="150">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            @change="updateStatus(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="是"
                            inactive-text="否"
                            :active-value="1"
                            :inactive-value="0"
                            :disabled="!rightsButtons['operate']"
                            >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作"  v-if="rightsButtons['edit'] || rightsButtons['goodsList']">
                <template slot-scope="scope">
                    <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                    <router-link v-if="rightsButtons['goodsList']" :to="{name: 'activityTopicGoodsList', params: {id: scope.row.topicId}}">
                        <el-button type="primary" plain size="mini">商品管理</el-button>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="editItem.id ? '编辑商品专题': '新建商品专题'" :visible.sync="showEditPop">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="专题名称:" prop="name">
                    <el-input v-model="editItem.name"></el-input>
                </el-form-item>
                <el-form-item label="专题封面:" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :before-upload="beforeUpload">
                        <img v-if="editItem.image" :src="editItem.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="专题排序:" prop="sort">
                    <el-input v-model="editItem.sort" type="number"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" prop="status">
                    <el-switch
                            v-model="editItem.status"
                            active-color="#13ce66"
                            inactive-color="#ccc"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'activityTopic',
        data(){
            return {
                list: [],
                page: 1,
                pageSize: 20,
                total: 0,
                showEditPop: false,
                listLoading: false,
                btnDisabled: false,
                editItem: {},
                editRule: {
                    name: [
                        {required: true, message: '请输入专题名称', trigger: 'change'}
                    ],
                    image: [
                        {required: true, message: '请上传专题封面', trigger: 'change'}
                    ],
                    sort: [
                        {required: true, message: '请设置专题排序', trigger: 'change'}
                    ],
                },
            }
        },
        created(){
            this.getList()
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/specialTopic/list',
                    method: 'get',
                    params: {
                        pageIndex: this.page,
                        pageSize: this.pageSize,
                        isPage: 1
                    }
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.total = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
            },
            showAdd(){
                this.editItem = {
                    name: '',
                    image: '',
                    sort: 1,
                    status: 0
                };
                this.$nextTick(()=>{
                    this.$refs.editItem.clearValidate();
                });
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            showEdit(row){
                this.editItem = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.editItem.clearValidate();
                });
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            save(){
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.editItem.id ? '/bsnl-activity/specialTopic/update' : '/bsnl-activity/specialTopic/create'
                    this.btnDisabled = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.editItem
                    }).then(() => {
                        this.btnDisabled = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });
                });
            },
            updateStatus(item){
                this.request({
                    url: '/bsnl-activity/specialTopic/update',
                    method: 'post',
                    data: item
                }).then(() => {
                    this.$message.success(item.status === 1 ? '启用成功' : '禁用成功');
                }).catch(err => {
                    this.$message.error(err);
                });
            },
            uploadSuccess(res) {
                this.editItem.image = this.replaceImgUrl(res.filePath);
            },
            // 选择商品
            chooseGoods(){
                this.checkGoods(this.goodsChecked).then(val => {
                    this.goodsChecked = [...val];
                }).catch(err => {
                    this.goodsChecked = [];
                });
            },
            // 通过tag删除
            delGoods(index) {
                this.goodsChecked.splice(index, 1);
            },
            // 选择商品套餐
            chooseGoodsPackage(){
                this.checkPackage(this.packageChecked).then(val => {
                    this.packageChecked = [...val];
                }).catch(err => {
                    this.packageChecked = [];
                });
            },
            // 通过tag删除
            delGoodsPackage(index) {
                this.packageChecked.splice(index, 1);
            },
        }
    }
</script>
